
<div style="width: 973px;height:700px; background:url('img/hongkang.png') no-repeat; background-size:973px 700px; margin: 30px 0px 0px 30px; padding-top: 10px; ">
    <div id="hot_map" style="background: rgba(255, 255, 255, 0.6); width: 973px;height:700px;margin: -10px 0px 0px 0px;"></div>
</div>
<script>
    var top_shift = 30;
    var left_shift = 30;
    var dialog_top_shift = top_shift + 12;
    var dialog_left_shift = left_shift + 12;
    var map_left_border = 113.8328
    var map_right_border = 114.4535
    var map_top_border = 22.5690
    var map_bottom_border = 22.1524
    var map_width = 973
    var map_height = 700

    var demand_wating_round = {}

    var demand_relationship = {}

    var supplier_relationship = {}

    var relationships = []

    function startWebSocket() {
        if ('WebSocket' in window) {
            ws = new WebSocket("ws://localhost:8080/websocket/attr1");
        }
        else if ('MozWebSocket' in window)
            ws = new MozWebSocket("ws://localhost:8080/websocket/attr2");
        else
            alert("not support");

        ws.onmessage = function(evt) {
            console.log("接受到数据---->" + evt.data);
            evt = JSON.parse(evt.data)
            switch (evt.type) {
                case "add_demand":
                    create_demand(evt.id, evt.lon, evt.lat);
                    break;
                case "delete_demand":
                    console.log("--------------------------------------------");
                    delete_demand(evt.id);
                    break;
                case "add_supplier":
                    create_supplier(evt.id, evt.lon, evt.lat);
                    break;
                case "delete_supplier":
                    delete_supplier(evt.id);
                    break;
                case "round_ended":
                    clear_relationship();
                    break;
                case "select_demand":
                    select_demand(evt.demandId, evt.supplierId);
                    break;
                case "init_relationship":
                    delete evt.type;
                    init_relationship(evt);
                    break;
                default:
            }
        };

        ws.onclose = function(evt) {
            console.log("前端ws监测到---close");
        };

        ws.onopen = function(evt) {
            console.log("ws.open is open");
        };
    }

    startWebSocket()

    layui.$.ajax({
        type : "get",
        async : false,  //同步请求
        url : "http://localhost:8080/relationship/restore",
        success:function(data){
            restore_state(data);
        },
        error: function() {
            //layui 弹出层
        }
    })

    function restore_state(raw_data) {
        var data = JSON.parse(raw_data);
        var demand_infos = data.demands;
        var supplier_infos = data.suppliers;
        var relationship_infos = data.relationships;
        for (var demand_info of demand_infos) {
            create_demand(demand_info.id, demand_info.lon, demand_info.lat);
            // console.log("received!" + demand_info.id);
        }
        for (var supplier_info of supplier_infos) {
            create_supplier(supplier_info.id, supplier_info.lon, supplier_info.lat);
            // console.log("received!" + demand_info.id);
        }
        for (var relationship_info of relationship_infos) {
            var ids = relationship_info.split("-");
            create_relationship(ids[0], ids[1]);
        }
    }

    function showDialogue(left, top) {
        var dialog = document.createElement("div");
        dialog.id = "dialogue";
        dialog.style = "position:absolute; background-color: black; width: 80px; height: 80px; " + "left: " + (dialog_left_shift + left) + "px; top: " + (dialog_top_shift + top) + "px; z-index: 9999";
        dialog.innerHTML = "<span style='color: white'>Some information</span>";
        layui.$("#hot_map")[0].appendChild(dialog);
    }

    // showDialogue(parseInt(this.style.left), parseInt(this.style.top));


    function create_demand(demand_id, lon, lat){
        if (document.getElementById(demand_id) != undefined) {
            return;
        }
        demand_wating_round[demand_id] = 0
        var demand = document.createElement("div");
        demand.id = demand_id;
        var demand_left = (lon - map_left_border) / (map_right_border - map_left_border)
        var demand_top = (map_top_border - lat) / (map_top_border - map_bottom_border)
        demand.style = "position:absolute; background:url('img/demand.png'); no-repeat; background-size:40px 40px; width: 40px; height: 40px; " + "left: " + (left_shift + demand_left * map_width) + "px; top: " + (top_shift + demand_top * map_height) + "px";
        layui.$("#hot_map")[0].appendChild(demand);
    }

    function delete_demand(demand_id){
        if (demand_relationship[demand_id] != undefined) {
            for (var id of demand_relationship[demand_id]) {
                delete_relationship(id);
            }
            delete demand_relationship[demand_id];
        }
        if(document.getElementById(demand_id) != undefined) {
            document.getElementById(demand_id).remove();
        }
    }

    function update_demand(){

    }

    function create_supplier(supplier_id, lon, lat){
        if (document.getElementById(supplier_id) != undefined) {
            return;
        }
        var supplier = document.createElement("div");
        supplier.id = supplier_id;
        var supplier_left = (lon - map_left_border) / (map_right_border - map_left_border)
        var supplier_top = (map_top_border - lat) / (map_top_border - map_bottom_border)
        supplier.style = "position:absolute; background:url('img/supplier.png'); no-repeat; background-size:50px 50px; width: 50px; height: 50px; " + "left: " + (left_shift + supplier_left * map_width) + "px; top: " + (top_shift + supplier_top * map_height) + "px";
        layui.$("#hot_map")[0].appendChild(supplier);
    }

    function delete_supplier(supplier_id){
        if (supplier_relationship[supplier_id] != undefined) {
            for (var id of supplier_relationship[supplier_id]) {
                delete_relationship(id);
            }
            delete supplier_relationship[supplier_id];
        }
        if (document.getElementById(supplier_id) != undefined) {
            document.getElementById(supplier_id).remove();
        }
    }

    function update_supplier(){

    }

    function create_relationship(demand_id, supplier_id){
        var relationship_id = demand_id + "-" + supplier_id;
        if (document.getElementById(relationship_id) != undefined) {
            return;
        }
        if (demand_relationship[demand_id] == undefined) {
            demand_relationship[demand_id] = []
        }
        if (supplier_relationship[supplier_id] == undefined) {
            supplier_relationship[supplier_id] = []
        }
        demand_relationship[demand_id].push(relationship_id);
        supplier_relationship[supplier_id].push(relationship_id);
        relationships.push(relationship_id);
        var demand_entity = document.getElementById(demand_id);
        var supplier_entity = document.getElementById(supplier_id);
        var left = Math.min(parseInt(demand_entity.style.left), parseInt(supplier_entity.style.left))
        var top = Math.min(parseInt(demand_entity.style.top), parseInt(supplier_entity.style.top))
        var height = Math.max(parseInt(demand_entity.style.top), parseInt(supplier_entity.style.top)) - top
        var width = Math.max(parseInt(demand_entity.style.left), parseInt(supplier_entity.style.left)) - left
        var start_x = parseInt(demand_entity.style.left) - left;
        var start_y = parseInt(demand_entity.style.top) - top;
        var end_x = parseInt(supplier_entity.style.left) - left;
        var end_y = parseInt(supplier_entity.style.top) - top;
        var line = document.createElement("canvas");
        line.id = relationship_id;
        line.width = width;
        line.height = height;
        left = left + 20;
        top = top + 20;
        line.style = "position:absolute;" + "left: " + left + "px; top: " + top + "px";
        layui.$("#hot_map")[0].appendChild(line);
        var ctx = line.getContext("2d");
        ctx.beginPath();
        ctx.moveTo(start_x, start_y);
        ctx.lineTo(end_x, end_y);
        ctx.stroke();
    }

    function delete_relationship(id){
        if (document.getElementById(id) != undefined) {
            document.getElementById(id).remove();
        }
    }

    function reset_relationship(id){
        if (document.getElementById(id) != undefined) {
            var canvas = document.getElementById(id);
            canvas.height = canvas.height;
        }
    }

    function highlight_relationship(id){
        var ids = id.split("-");
        var demand_id = ids[0];
        var supplier_id = ids[1];
        var line = document.getElementById(id);
        if (line == undefined) {
            return;
        }
        console.log(id);
        var demand_entity = document.getElementById(demand_id);
        var supplier_entity = document.getElementById(supplier_id);
        var left = Math.min(parseInt(demand_entity.style.left), parseInt(supplier_entity.style.left))
        var top = Math.min(parseInt(demand_entity.style.top), parseInt(supplier_entity.style.top))
        var start_x = parseInt(demand_entity.style.left) - left;
        var start_y = parseInt(demand_entity.style.top) - top;
        var end_x = parseInt(supplier_entity.style.left) - left;
        var end_y = parseInt(supplier_entity.style.top) - top;
        var ctx = line.getContext("2d");
        ctx.strokeStyle = "#ff8f00";
        ctx.beginPath();
        ctx.moveTo(start_x, start_y);
        ctx.lineTo(end_x, end_y);
        ctx.lineWidth = 8;
        ctx.stroke();
    }

    function clear_relationship(){
        for (var id in demand_wating_round) {
            if (demand_wating_round[id] != undefined) {
                demand_wating_round[id] = demand_wating_round[id] + 1;
            }
        }
        demand_relationship = {}
        supplier_relationship = {}
        for (var id of relationships) {
            delete_relationship(id);
        }
        relationships = []
    }
    
    function init_relationship(relationship_data) {
        for (var supplier_id in relationship_data) {
            var demand_ids = relationship_data[supplier_id];
            // console.log(demand_ids);
            for (var demand_id of demand_ids) {
                // console.log(demand_id);
                create_relationship(demand_id, supplier_id);
            }
        }
    }

    function select_demand(demand_id, supplier_id) {
        if (demand_wating_round[demand_id] != undefined) {
            delete demand_wating_round[demand_id];
        }
        console.log(demand_relationship[demand_id]);
        console.log(supplier_relationship[supplier_id]);
        var is_visible = true;
        var timerId = setInterval(function () {
            if(is_visible) {
                highlight_relationship(demand_id + "-" + supplier_id);
                is_visible = false;
                return;
            }
            reset_relationship(demand_id + "-" + supplier_id);
            is_visible = true;
        },400);
        setTimeout(function () {
            clearInterval(timerId);
            delete_relationship(demand_id + "-" + supplier_id);
            delete_demand(demand_id);
            delete_supplier(supplier_id);
        }, 2000);
    }

</script>